<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
    >
      <el-form-item label="关系名" prop="relationName">
        <el-input
          v-model="queryParams.relationName"
          placeholder="请输入关系名"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
        <el-button @click="handleAdd('add')" :icon="Plus" plain type="primary">添加</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column align="center" label="关系名称" fixed="left" prop="relationName"/>
      <el-table-column align="center" label="创建时间" fixed="left" prop="createTime"/>
      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit('edit',scope.row)">
            修改
          </el-button>
          <el-button link type="primary" @click="deleteFcn(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination :current-page="queryParams.currentPage" :page-size="queryParams.pageSize"
                   :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="false"
                   layout="total, sizes, prev, pager, next, jumper" :total="queryParams.count"
                   @tab-click="handleTabClick"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"/>

  </ContentWrap>
  <!-- 添加编辑对话框 -->
  <addEditingDialog ref="addEditingDialogRef" @subEvent="getTableData" :dialogTitle="dialogTitle"
                    :operationType="operationType" :currentOperationData="currentOperationData">
  </addEditingDialog>
</template>

<script lang="ts" setup>
import * as FormApi from "@/api/kg/relationship";
import {ref} from "vue";
import addEditingDialog from './addEditingDialog.vue'

defineOptions({name: 'KGProcessIndex'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const addEditingDialogRef = ref()
const dialogTitle = ref<string>('')  // 当前标题
const operationType = ref<string>('') // 当前操作类型（新增或编辑）
const currentOperationData = reactive({}) // 当前操作数据

const loading = ref(false)
const total = ref(0)
const list = ref([])
// 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  count: 1,
  relationName: undefined,
})

const handleQuery = () => {
  getTableData()
}
const queryFormRef = ref<any>()
const resetQuery = () => {
  queryFormRef.value.resetFields()
  getTableData()
}
// 分页：pageSize 改变时会触发
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  getTableData()
}
// 分页：currentPage 改变时会触发
const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
  getTableData()
}
const getTableData = () => {
  return new Promise((resolve, reject) => {
    try {
      const params = {
        relationName: queryParams.relationName,
        pageNo: queryParams.pageNo,
        pageSize: queryParams.pageSize
      }
      FormApi.getRDJCGraphRelationPage(params).then((res) => {
        list.value = res.list
        queryParams.count = res.total
        resolve(res)
      })
    } catch {
      reject()
    } finally {
      console.log('getTableData')
      console.log('Promise执行完毕')
    }
  })
}
// 添加
const handleAdd = (handleType: string) => {
  dialogTitle.value = '添加关系维护'
  operationType.value = handleType
  addEditingDialogRef.value.open()
}
// 修改
const handleEdit = (handleType: string, data) => {
  dialogTitle.value = '修改关系维护'
  operationType.value = handleType
  Object.assign(currentOperationData, data)
  addEditingDialogRef.value.open()
}
// 删除
const deleteFcn = (data: any) => {
  ElMessageBox.confirm('确定永久删除该条数据吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      FormApi.deleteRDJCGraphRelation(data)
        .then((res: any) => {
          ElMessage({
            type: 'success',
            grouping: true,
            showClose: true,
            message: '删除已完成'
          })
          getTableData()
        })
        .catch((error: any) => {
          ElMessage({
            message: error,
            grouping: true,
            showClose: true,
            type: 'error'
          })
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        grouping: true,
        showClose: true,
        message: '删除已取消'
      })
    })
}
onMounted(() => {
  getTableData()
})
</script>

<style scoped></style>
